<template>
  <div class="kc-1">
    <div class="dh-1">
      <div class="z-1">
        <div class="se-1"></div>
        <div class="t-1">{{ item.name }}</div>
      </div>
      <div class="you-1">
        <div class="wei-1 xis" v-if="qeflag">
          <div
            class="qb-1 xis"
            @click="quadd"
            :style="{
              background: flag ? '#0f63ed' : '#ffffff',
              color: flag ? '#ffffff' : '#696e76'
            }"
          >
            全部
          </div>
          <div
            class="ai-1 xis"
            @click="aiadd"
            :style="{
              background: flag ? '#ffffff' : '#0f63ed',
              color: flag ? '#696e76' : '#ffffff'
            }"
          >
            AI课程
          </div>
        </div>
        <div class="chak-1 xis" @click="ckqadd(item.id)" v-if="flags">
          查看全部
          <img src="../img/jiantou.png" class="im-g" />
        </div>
      </div>
    </div>
    <div class="kapin-1">
      <CardIdex
        v-for="(items, index) in item.collegeList"
        :key="index"
        :items="items"
        @kpadd="kpadd"
      ></CardIdex>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import defaultCover from '../img/defaultCover.png'
import CardIdex from './CardIdex.vue'
const props = withDefaults(
  defineProps<{
    flags?: boolean
    item?: any
    qeflag?: boolean
  }>(),
  {
    flags: true
  }
)
const router = useRouter()
const flag = ref(true)
const emits = defineEmits<{
  (e: 'quadd'): void
  (e: 'aiadd'): void
}>()
const quadd = () => {
  flag.value = true
  emits('quadd')
  console.log('点击了全部')
}

const aiadd = () => {
  flag.value = false
  emits('aiadd')
  console.log('点击了ai课程')
}
const kpadd = (item: any) => {
  const route = router.resolve({
    path: '/courseDetails',
    query: {
      id: item.kch,
      xn: item.xn,
      xq: item.xq,
      ghs: item.ghs,
      bh: item.bh
      // title: item.title
    }
  }) // 解析路由路径
  window.open(route.href, '_blank') // 在新窗口打开
}
const ckqadd = (id: any) => {
  const route = router.resolve({
    path: '/lookMore',
    query: { id }
  }) // 解析路由路径
  window.open(route.href, '_blank') // 在新窗口打开
}
</script>

<style lang="scss" scoped>
.kc-1 {
  width: 1320px;
}
.dh-1 {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.z-1 {
  display: flex;
  align-items: center;
  width: 70px;
}
.se-1 {
  width: 6px;
  height: 24px;
  margin-right: 12px;
  background: #0f63ed;
}
.t-1 {
  font-size: 20px;
  color: #18191a;
}
.you-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wei-1 {
  width: 108px;
  height: 32px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 17px;
  justify-content: center;
  border: 1px solid #e6ebf0;
}
.qb-1 {
  width: 44px;
  height: 24px;
}
.ai-1 {
  width: 56px;
  height: 24px;
}
.qb-1,
.ai-1 {
  transition:
    background 0.3s ease,
    color 0.3s ease; /* 添加过渡效果 */
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  color: #696e76;
  border-radius: 17px;
  background: #ffffff;
}
.chak-1 {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #2f3133;
}
.im-g {
  width: 16px;
  height: 16px;
  margin-left: 4px;
}
.kapin-1 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(312px, 1fr));
  gap: 20px;
}
</style>
